<%--
  Created by IntelliJ IDEA.
  User: 86158
  Date: 2022/9/23
  Time: 20:39
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>HRM</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
    <script src="${pageContext.request.contextPath}/layui/layui.js"></script>
    <style>
        .firstTab i.layui-tab-close {
            display: none;
        }
        #notice {
            width: 300px;/*单行显示，超出隐藏*/
            height: 60px;/*固定公告栏显示区域的高度*/
            padding: 0 30px;
            /*background-color: #b3effe;*/
            overflow: hidden;
        }
        #notice ul li {
            list-style: none;
            line-height: 60px;
            /*以下为了单行显示，超出隐藏*/
            display: block;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }
    </style>
</head>
<body>
<div class="layui-layout layui-layout-admin">
    <div class="layui-header" style="display: inline-flex">
        <div class="layui-logo layui-hide-xs layui-bg-black">人事管理系统</div>
        <!-- 头部区域（可配合layui 已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
            <!-- 移动端显示 -->
            <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
                <i class="layui-icon layui-icon-spread-left"></i>
            </li>
            <li class="layui-nav-item layui-hide layui-show-md-inline-block">
                <a
                    style="display: ${(loginUser.status==2 && count>0)?'block':'none'}; z-index: 10; position: relative"
                    data-url="${pageContext.request.contextPath}/user/audit.html"
                    data-id="auditUser"
                    data-title="<i class='layui-icon layui-icon-user' style='font-size:18px;color:#009688'></i>&nbsp;&nbsp;审核用户"
                    data-type="tabAdd"
                    class="site-demo-active">待审核<span
                    class="layui-badge" id="count">${count}</span></a>
            </li>
        </ul>

        <div class="layui-nav" style="line-height: 60px;text-align: center;flex: 1;display: flex;justify-content: center;">
            <i class="layui-icon layui-icon-speaker" style="margin-right: 10px;font-size: 25px"></i>
            <div id="notice">
                <ul style="margin-left: 300px">
                    <li>要有最朴素的生活和最遥远的梦想，即使明天天寒地冻，山高水远，路远马亡</li>
                    <li>当你在荒废时间，有多少人在拼命。别在最该奋斗的日子，选择了安逸。</li>
                    <li>如今我努力奔跑，不过是为了追上那个曾经被寄予厚望的自己</li>
                    <li>在你想要放弃的那一刻，想想为什么当初坚持走到了这里。</li>
                    <li>当你真正喜欢做一件事时，自律就会成为你的本能</li>
                    <li>梦想，可以天花乱坠，理想，是我们一步一个脚印踩出来的坎坷道路。</li>
                </ul>
            </div>
        </div>

        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item layui-hide layui-show-md-inline-block">
                <div id="showTime"></div>
            </li>
            <li class="layui-nav-item layui-hide layui-show-md-inline-block">
                <a href="javascript:;">
                    <img id="rightAvatar" src="${pageContext.request.contextPath}/images/avatars/${loginUser.avatar == null ? "default.png" : loginUser.avatar}"
                         class="layui-nav-img">
                    ${loginUser.userName}
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="javascript:;" id="userMsg">基本信息</a></dd>
                    <dd><a href="javascript:;" id="updateAvatar">切换头像</a></dd>
                    <dd><a href="javascript:;" id="updatePassword">修改密码</a></dd>
                    <dd><a href="${pageContext.request.contextPath}/user/logout" id="logout">退出登录</a></dd>
                </dl>
            </li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <div style="text-align: center;margin-top: 20px;margin-bottom: 20px">
                <img id="leftAvatar" src="${pageContext.request.contextPath}/images/avatars/${loginUser.avatar == null ? "default.png" : loginUser.avatar}"
                     width="100px" height="100px" style="border-radius: 50%">
                <br>
                <p>欢迎${loginUser.userName}</p>
            </div>
            <hr>
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <li class="layui-nav-item">
                    <a class="" href="javascript:;">用户管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;"
                               data-url="${pageContext.request.contextPath}/user/list.html"
                               data-id="userList"
                               data-title="<i class='layui-icon layui-icon-user' style='font-size:18px;color:#009688'></i>&nbsp;&nbsp;用户查询"
                               data-type="tabAdd"
                               class="site-demo-active">用户查询</a></dd>
                        <dd><a href="javascript:;" style="display:${loginUser.status==2?'block':'none'}"
                               data-url="${pageContext.request.contextPath}/user/addUser.html"
                               data-id="addUser"
                               data-title="<i class='layui-icon layui-icon-addition' style='font-size:18px;color:#009688'></i>&nbsp;&nbsp;添加用户"
                               data-type="tabAdd"
                               class="site-demo-active" id="addUser">用户添加</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a class="" href="javascript:;">部门管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;"
                               data-url="${pageContext.request.contextPath}/department/list.html"
                               data-id="deptList"
                               data-title="<i class='layui-icon layui-icon-template-1' style='font-size:18px;color:#009688'></i>&nbsp;&nbsp;部门查询"
                               data-type="tabAdd"
                               class="site-demo-active">部门查询</a></dd>
                        <dd><a href="javascript:;"
                               data-url="${pageContext.request.contextPath}/department/addDept.html"
                               data-id="addDept"
                               data-title="<i class='layui-icon layui-icon-tree' style='font-size:18px;color:#009688'></i>&nbsp;&nbsp;添加部门"
                               data-type="tabAdd"
                               class="site-demo-active">部门添加</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">职位管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;"
                               data-url="${pageContext.request.contextPath}/job/list.html"
                               data-id="jobList"
                               data-title="<i class='layui-icon layui-icon-chat' style='font-size:18px;color:#009688'></i>&nbsp;&nbsp;职位查询"
                               data-type="tabAdd"
                               class="site-demo-active">职位查询</a></dd>
                        <dd><a href="javascript:;"
                               data-url="${pageContext.request.contextPath}/job/addJob.html"
                               data-id="addJob"
                               data-title="<i class='layui-icon layui-icon-release' style='font-size:18px;color:#009688'></i>&nbsp;&nbsp;添加职位"
                               data-type="tabAdd"
                               class="site-demo-active">职位添加</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">员工管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;"
                               data-url="${pageContext.request.contextPath}/employee/list.html"
                               data-id="employeeList"
                               data-title="<i class='layui-icon layui-icon-group' style='font-size:18px;color:#009688'></i>&nbsp;&nbsp;员工查询"
                               data-type="tabAdd"
                               class="site-demo-active">员工查询</a></dd>
                        <dd><a href="javascript:;"
                               data-url="${pageContext.request.contextPath}/employee/addEmp.html"
                               data-id="addEmployee"
                               data-title="<i class='layui-icon layui-icon-friends' style='font-size:18px;color:#009688'></i>&nbsp;&nbsp;添加员工"
                               data-type="tabAdd"
                               class="site-demo-active">员工添加</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">下载中心</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;"
                               data-url="${pageContext.request.contextPath}/document/list.html"
                               data-id="documentList"
                               data-title="<i class='layui-icon layui-icon-file-b' style='font-size:18px;color:#009688'></i>&nbsp;&nbsp;文档查询"
                               data-type="tabAdd"
                               class="site-demo-active">文档查询</a></dd>
                        <dd><a href="javascript:;"
                               data-url="${pageContext.request.contextPath}/document/addDocument.html"
                               data-id="addDocument"
                               data-title="<i class='layui-icon layui-icon-upload-drag' style='font-size:18px;color:#009688'></i>&nbsp;&nbsp;添加文档"
                               data-type="tabAdd"
                               class="site-demo-active">上传文档</a></dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>

    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div style="padding: 15px;">
            <div class="layui-tab" lay-filter="demo" lay-allowclose="true">
                <ul class="layui-tab-title">
                    <li class="layui-this firstTab" lay-id="11">首页</li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">
                        <iframe src="${pageContext.request.contextPath}/toWelcome" width="100%"
                                height=550px"></iframe>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="layui-footer">
        <!-- 底部固定区域 -->
        <div style="text-align: center">
            <p>@某不知名股份有限公司</p>
        </div>
    </div>
</div>
<script>


    //JS
    layui.use(['element', 'layer', 'util'], function () {
        var element = layui.element
            , layer = layui.layer
            , util = layui.util
            , $ = layui.$;



        //查看基本信息
        $('#userMsg').click(function () {
            layer.open({
                title: '用户基本信息',
                type: 2,
                area: ['550px', '500px'],
                maxmin: true,
                content: "${pageContext.request.contextPath}/user/toUserMsg"
            })

        });

        //修改密码
        $('#updatePassword').click(function () {
            layer.open({
                id: "UpdatePassword-frame",
                title: '修改密码',
                type: 2,
                area: ['550px', '500px'],
                maxmin: true,
                content: "${pageContext.request.contextPath}/user/toUpdatePassword"
            })

        });
        //切换头像
        $('#updateAvatar').click(function () {
            layer.open({
                id: "UpdateAvatar-frame",
                title: '切换头像',
                type: 2,
                area: ['550px', '500px'],
                content: "${pageContext.request.contextPath}/user/toUpdateAvatar"
            })
        })
        //头部事件
        util.event('lay-header-event', {
            //左侧菜单事件
            menuLeft: function (othis) {
                layer.msg('展开左侧菜单的操作', {icon: 0});
            }

        });

        //触发事件
        var active = {
            tabAdd: function (url, id, title) {
                //新增一个Tab项
                element.tabAdd('demo', {
                    title: title
                    , content: '<iframe data-frame="' + id
                        + '"scrolling="auto" frameborder="0" src="' + url
                        + '"style="width:100%;height:calc(100vh - 185px)"></iframe>'
                    , id: id

                })
                element.render('tab');
            }
            , tabDelete: function (id) {
                //删除指定Tab项
                element.tabDelete('demo', id);
            }
            , tabChange: function (id) {
                //切换到指定Tab项
                element.tabChange('demo', id);
            }
        };

        $('.site-demo-active').on('click', function () {
            var dataid = $(this);
            if ($(".layui-tab-title li[lay-id]").length <= 0) {
                active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"), dataid.attr("data-title"));
            } else {
                var isData = false;
                $.each($(".layui-tab-title li[lay-id]"),
                    function () {
                        if ($(this).attr("lay-id") == dataid.attr("data-id")) {
                            isData = true;

                        }
                    })
                if (isData == false) {
                    active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"), dataid.attr("data-title"));

                }
            }
            active.tabChange(dataid.attr("data-id"));
        });

        //时间显示
        let myClock = setInterval(function () {
            var date = new Date();
            //date.getDay()拿到的值是阿拉伯数字，将他换成汉字
            var week = date.getDay()
            switch (week) {
                case 1:
                    week = "星期一"
                    break;
                case 2:
                    week = "星期二"
                    break;
                case 3:
                    week = "星期三"
                    break;
                case 4:
                    week = "星期四"
                    break;
                case 5:
                    week = "星期五"
                    break;
                case 6:
                    week = "星期六"
                    break;
                case 0:
                    week = "星期日"
                    break;
            }
            // 时间没有在此处一次性组合完毕是为了方便在 输出时美化
            // 组合年月日
            let ymd = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
            // 组合时分秒
            let hms = date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();

            $('#showTime').html( ymd + "&nbsp;&nbsp;" + hms + "&nbsp;&nbsp; " + week);
        }, 1000)

        $(function () {
            // 调用 公告滚动函数
            // setInterval("noticeUp('.notice ul','-35px',500)", 2000);
            setInterval(function () {
                $('#notice ul').animate({
                    marginLeft: '-300px'
                }, 7000, function () {
                    $(this).css({marginLeft:"300px"}).find(":first").appendTo(this);
                })
            }, 2000);
        });
    });
</script>
</body>
</html>
